<template>
  <div class="player-wrapper" ref="playerWrapper">
    <div class="video-container">
      <video
        ref="videoDom"
        class="video-content"
        @click="playBtnEvent"
        src="../../static/video/video.mp4"
      ></video>
      <div class="controls">
        <div :class="playOrPause ? 'playBtn' : 'pauseBtn'"
          @click="playBtnEvent"
        ></div>

        <div class="loadBtn" id="loadBtn">
          <div class="loadleft"></div>
          <div class="loadright"></div>
          <div class="dragBtn" ref="dragBtn"></div>
          <div class="loadLine" :style="{ width: videoPercentage }" ref="loadLine">
            <div class="loadLine-right"></div>
          </div>
        </div>
        <div class="timeNode">
          <span class="now">{{curTime}}</span>
          <span> / </span>
          <span class="all">{{totalTime}}</span>
        </div>
        <div class="volumeBtn"></div>
        <div class="volumeProgress" id="volumeProgress">
          <div class="v-left"></div>
          <div class="v-right"></div>
          <div class="v-drag" ref="volumeDrag"></div>
        </div>
        <div class="fullscreenBtn" @click="fullscreenBtnEvent"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Player',
  data () {
    return {
      playOrPause: true,
      totalTime: '00:00',
      curTime: '00:00',
      videoPercentage: '0%',
      loadDragBtnOffsetX: 0,
      volumeDragOffsetX: 0
    };
  },
  mounted () {
    this.registerSomeEvents();
  },
  destroyed () {
    this.removeSomeEvents();
  },
  methods: {
    registerSomeEvents () {
      this.$refs.videoDom.addEventListener('canplay', this.videoCanPlay);
      this.$refs.videoDom.addEventListener('timeupdate', this.videoTimeUpdate);
      this.$refs.videoDom.addEventListener('ended', this.videoEnded);
      this.$refs.dragBtn.addEventListener('mousedown', this.loadDragMouseEvent);
      this.$refs.volumeDrag.addEventListener('mousedown', this.volumeDragMouseEvent);
    },
    removeSomeEvents () {
      this.$refs.videoDom.removeEventListener('canplay', this.videoCanPlay);
      this.$refs.videoDom.removeEventListener('timeupdate', this.videoTimeUpdate);
      this.$refs.videoDom.removeEventListener('ended', this.videoEnded);
      this.$refs.dragBtn.removeEventListener('mousedown', this.loadDragMouseEvent);
      this.$refs.volumeDrag.removeEventListener('mousedown', this.volumeDragMouseEvent);
    },
    videoCanPlay () {
      const needTime = parseInt(this.$refs.videoDom.duration);
      const second = needTime % 60;
      const minute = parseInt(needTime / 60);
      this.totalTime = (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second);
    },
    videoTimeUpdate () {
      const needTime = parseInt(this.$refs.videoDom.currentTime);
      const second = needTime % 60;
      const minute = parseInt(needTime / 60);
      this.curTime = (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second);
      this.videoPercentage = (this.$refs.videoDom.currentTime / this.$refs.videoDom.duration) * 100 + '%';
      this.$refs.dragBtn.style.left = this.$refs.loadLine.offsetWidth - 8.5 + 'px';
    },
    videoEnded () {
      this.curTime = '00:00';
      this.playOrPause = true;
      this.videoPercentage = '0%';
      this.$refs.dragBtn.style.left = '-8.5px';
    },
    playBtnEvent () {
      this.playOrPause = !this.playOrPause;
      if (!this.playOrPause) {
        this.$refs.videoDom.play();
      } else {
        this.$refs.videoDom.pause();
      }
    },
    fullscreenBtnEvent () {
      this.$refs.videoDom.requestFullscreen();
    },
    loadDragMouseEvent (evt) {
      const target = evt.target;
      const loadOffsetWidth = document.getElementById('loadBtn').offsetWidth;
      this.loadDragBtnOffsetX = evt.clientX - target.offsetLeft;
      this.playOrPause = true;
      this.$refs.videoDom.pause();
      this.$refs.playerWrapper.onmousemove = (evt) => {
        let needX = evt.clientX - this.loadDragBtnOffsetX;
        const maxX = loadOffsetWidth - 8.5;
        needX = needX < -8.5 ? -8.5 : needX;
        needX = needX > maxX ? maxX : needX
        this.$refs.dragBtn.style.left = needX + 'px';
        this.videoPercentage = (this.$refs.dragBtn.offsetLeft + 9) / loadOffsetWidth * 100 + '%';
      };
      this.$refs.playerWrapper.onmouseup = () => {
        this.$refs.playerWrapper.onmousemove = this.$refs.playerWrapper.onmouseup = null;
        this.$refs.videoDom.currentTime = this.$refs.videoDom.duration * (this.$refs.dragBtn.offsetLeft + 9) / loadOffsetWidth;
        this.playOrPause = false;
        this.$refs.videoDom.play();
      };
    },
    volumeDragMouseEvent (evt) {
      const target = evt.target;
      const volumeOffsetWidth = document.getElementById('volumeProgress').offsetWidth;
      this.volumeDragOffsetX = evt.clientX - target.offsetLeft;
      this.$refs.playerWrapper.onmousemove = (evt) => {
        let needX = evt.clientX - this.volumeDragOffsetX;
        const maxX = volumeOffsetWidth - 3;
        needX = needX < -2.5 ? -2.5 : needX;
        needX = needX > maxX ? maxX : needX;
        this.$refs.volumeDrag.style.left = needX + 'px';
        this.$refs.videoDom.volume = (this.$refs.volumeDrag.offsetLeft + 3) / volumeOffsetWidth;
      };
      this.$refs.playerWrapper.onmouseup = () => {
        this.$refs.playerWrapper.onmousemove = this.$refs.playerWrapper.onmouseup = null;
      };
    }
  }
}
</script>

<style lang="less" scoped>
.player-wrapper{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .video-container{
    width: 802px;
    height: 480px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 4px #5b606d;
    .video-content{
      height: 450px;
      float: left;
    }
    .controls{
      width: 800px;
      height: 50px;
      line-height: 50px;
      display: flex;
      flex-direction: row;
      background: url("../../static/img/video/ctrs_bg.gif") repeat-x;
      .playBtn{
        width: 13px;
        height: 15px;
        margin: 5px 5px 0 20px;
        cursor: pointer;
        background: url("../../static/img/video/playNode.png") no-repeat;
      }
      .pauseBtn{
        width: 13px;
        height: 15px;
        margin: 5px 5px 0 20px;
        cursor: pointer;
        background: url("../../static/img/video/pause.png") no-repeat;
      }

      .loadBtn{
        height: 9px;
        flex-grow: 1;
        margin: 9px 0 0 14px;
        position: relative;
        background: url("../../static/img/video/load_bg.png") repeat-x;
        .loadleft{
          height: 100%;
          width: 3px;
          position: absolute;
          left: 0;
          top: 0;
          background: url("../../static/img/video/left_bg.png") no-repeat;
        }
        .loadright{
          height: 100%;
          width: 3px;
          position: absolute;
          right: 0;
          top: 0;
          background: url("../../static/img/video/right_bg.png") no-repeat;
        }
        .dragBtn{
          top: -3.5px;
          left: -8.5px;
          width: 17px;
          height: 17px;
          cursor: pointer;
          position: absolute;
          z-index: 5;
          background: url("../../static/img/video/crl_bg.png");
        }
        .loadLine{
          height: 7px;
          position: absolute;
          left: 0;
          top: 1px;
          background: url("../../static/img/video/line_bg.png") repeat-x;
          .loadLine-right{
            width: 2px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url("../../static/img/video/line_r_bg.png") no-repeat;
          }
        }
      }
      .timeNode{
        width: 75px;
        height: 10px;
        display: flex;
        user-select: none;
        flex-direction: row;
        margin: 9px 0 0 15px;
        span {
          font-size: 10px;
          margin-left: 1px;
          line-height: 10px;
          color: #ffffff;
        }
      }
      .volumeBtn{
        width: 17px;
        height: 16px;
        margin: 5px 0 0 5px;
        background: url("../../static/img/video/volume_bg.png");
      }
      .volumeProgress{
        height: 8px;
        width: 61px;
        margin: 10px 0 0 10px;
        position: relative;
        background: url("../../static/img/video/volumeLine_bg.png") repeat-x;
        .v-left{
          width: 3px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: url("../../static/img/video/v_left.png") no-repeat;
        }
        .v-right{
          width: 3px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: url("../../static/img/video/v_right.png") no-repeat;
        }
        .v-drag{
          width: 15px;
          height: 13px;
          position: absolute;
          left: 58px;
          top: -3.5px;
          cursor: pointer;
          background: url("../../static/img/video/vo_d.png") no-repeat;
        }
      }
      .fullscreenBtn{
        margin: 6px 10px 0 20px;
        width: 15px;
        height: 17px;
        cursor: pointer;
        background: url("../../static/img/video/full_bg.png");
      }
    }
  }
}
</style>
